<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 200px;
        border: 10px solid pink;
        margin: 50px 100px;
        padding: 20px;
      }
      span {
        display: none;
        border: 1px solid #000;
        padding: 5px;
        float: right;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <span>回到顶部</span>
    <div style="height: 1000px"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    $(function () {
      //1）获取和设置元素的尺寸
      //$(dom).width() / height()			获取元素的宽度，高度
      console.log($(".box").width());
      console.log($(".box").height());
      $(".box").width("600px"); //传参设置宽高
      $(".box").height("400px");
      //$(dom).innerwidth() / innerheight()		获取包括padding的宽度，高度
      console.log($(".box").innerWidth()); //640
      //$(dom).outerwidth() / outerheight()		获取包括padding+border的宽度，高度
      console.log($(".box").outerWidth()); //660
      //$(dom).outerwidth(true) / outerheight(true)		获取包括padding+border+margin的宽度，高度
      console.log($(".box").outerWidth(true)); //860
      //2）获取相对页面的绝对位置
      //offset()
      console.log($(".box").offset()); //{top: 50, left: 108}
      console.log($(".box").offset().top);
      //3）获取浏览器可视区的宽高
      //$(window).width()
      console.log($(window).width());
      //$(window).height()
      //4）获取文档的宽高
      //$(documnet).width()
      console.log($(document).width());
      console.log($(document).height());
      console.log($(window).height());
      //$(documnet).height()
      //5）获取页面滚动距离
      //$(document).scrollTop()
      console.log($(document).scrollTop());

      $(window).scroll(function () {
        //滚动时获取垂直滚动距离
        console.log(Math.round($(document).scrollTop()));
      });
    });
  </script>
</html>
